<template>
  <div>
    <!--  搜索顶栏 -->
    <div class="top">
      <nut-searchbar
        v-model="searchsong"
        placeText="搜索歌曲"
        customClass="search"
        searchBtnIconColor="#fff"
        @input="atsearch"
        @submit="tosearch"
      ></nut-searchbar>
      <span class="iconfont menu" @click="show">&#xe653;</span>
      <nut-popup position="bottom" v-model="showmenu" @close="showmenu=false">
        <nut-cell title="退出登录" @click-cell="loginout"></nut-cell>
      </nut-popup>
      
      <div class="result" v-if="searchsong != ''">
        <nut-cell 
        v-for="item in results"
        :key="item.id"
        :title="item.name+' - '+item.artists[0].name"
        ></nut-cell> 
      </div>
    </div>
  </div>
</template>
<script>
import { url, search,logout } from "../../api/api";
export default {
  data() {
    return {
      searchsong: "", //  搜索歌曲
      results: "", // 搜索结果
      showmenu:false,  //  显示菜单栏
    };
  },
  mounted() {
    this.tosearch();
  },
  methods: {
    //  退出登录
    loginout(){
      this.$notify.success('退出成功');
      this.$router.push({ path: "/" });
      /* this.$axios.get(`${url}${logout}`).then(
        data=>{
          if(data.data.code == 200){
            this.$router.push({ path: "/" });
            this.$notify.success('退出成功');
            
          }
      },err=>{
        this.$notify.danger(err);
      }) */
    },
    //  显示菜单栏
    show(){
      this.showmenu = true
    },
    //  去搜索页面
    tosearch(value){
      if(value != undefined && value != ''){
        this.$router.push({ name: "searchpage",params:{searchsong:this.searchsong,results:this.results} });
      }
    },
    //  实时搜索
    atsearch() {
      this.$axios
        .get(`${url}${search}`, {
          params: {
            keywords: this.searchsong
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {
              this.results = data.data.result.songs;
              if (this.results.length > 10) {
                this.results.length = 10;
              }
            }
          },
          err => {
            this.$notify.danger(err);
          }
        );
    }
  }
};
</script>
<style scoped>
/* 顶部菜单和搜索 */
.top {
  height: 36px;
  line-height: 36px;
  padding-top: 10px;
  display: flex;
  margin-bottom: 10px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.top .menu {
  font-size: 30px;
  color: #fff;
  margin: -2px 0 0 18px;
}
.top .search {
  height: 30px;
  width: 80%;
  margin: 0 10px 0 20px;
}
.top .search-input {
  width: 249px;
}
.top .result {
  position: fixed;
  top: 45px;
  left: 20px;
  width: 80%;
  height: 200px;
  background-color: #f6f6f6;
  overflow-y: scroll;
}
</style>